<template>
  <div class="finance-page">
    <div class="left-panel flex-col">
      <Calendar />
      <ExpenseRanking class="flex-1" />
    </div>
    <div class="center-panel flex-col">
      <Settlement />
      <TransactionTable class="flex-1" />
    </div>
    <div class="right-panel flex-col">
      <IncomeExpenseCategory />
      <MonthlySummary class="flex-1" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Calendar from '@/components/Calendar/index.vue';
import ExpenseRanking from '@/components/ExpenseRanking/index.vue';
import Settlement from '@/components/Settlement/index.vue';
import TransactionTable from '@/components/TransactionTable/index.vue';
import IncomeExpenseCategory from '@/components/IncomeExpenseCategory/index.vue';
import MonthlySummary from '@/components/MonthlySummary/index.vue';
</script>

<style scoped>
.finance-page {
  display: flex;
  gap: 12px;
  padding: 20px;
  height: 100vh;
  background-color: #f5f7fa;
}

.left-panel {
  width: 350px;
}

.center-panel {
  flex: 1;
}

.right-panel {
  width: 300px;
}
</style> 